<template>
    <div class='contentUi'>
        <span class="label">{{label}}</span>
        <div class="components">
            <el-input v-model="tc_name" clearable maxlength = '8'></el-input>
        </div>
    </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
   export default {
    data() {
        return {
            label: '教师姓名',
            tc_name:'',
        }
    },
    computed: {
        ...mapState({
            getTeacher_name:state=>state.teacherModule.teacher_name
        })
    },
    watch: {
        tc_name(){
            this.setTeacher_name(this.tc_name);
        },
        getTeacher_name(){
            //监听重置
            if(this.getTeacher_name === ''){
                this.tc_name = '';
            }
        }
    },
    methods: {
        ...mapMutations({
            setTeacher_name:'teacherModule/setTeacher_name'
        }) 
    },
   }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
